<template>
  <div class="routeBg">
    <div class="routeBgOpacity"></div>
    <div class="routeBgDiv">
      <div class="routeBgDivIntro">
        <div class="closeImgDiv" @click="cancel"><img src="/static/images/share1/closeBg.png"></div>
        <div class="routeBgDivImg"><img src="/static/images/share1/shareRoute.png"></div>
        <div class="routeBgDivTxt">
          <h3>活动规则</h3>
          <p>
            1.商城购买时选择发起分享，您可分享给好友，邀请好友帮忙抓取福袋；
          </p>
          <p>
            2.发起人发起分享后立即获得一次抓取福袋的机会；
          </p>
          <p>
            3.共三次抓取机会，同一商品只能在同一时间发起一次帮助；
          </p>
          <p>
            4.福袋内容随机且不重复，发起有效期限限时1小时，逾期自动结束并生成订单;
          </p>
          <p>
            5.受邀帮忙抓取福袋的小伙伴在发起人支付成功后将获得5个美豆，美豆可在 商城使用；
          </p>
          <p>
            6.脑卫士在法律法规允许范围内对活动规则有最终解释权。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    methods:{
      cancel(){
        this.$emit("cancelRoute",false)
      }
    }
  }
</script>
<style scoped>
.routeBg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 10; 
}
.routeBg .routeBgOpacity{
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.6;
}
.routeBg .routeBgDiv{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 12;
}
 .routeBg .routeBgDiv .routeBgDivIntro{
  position: relative;
  width: 424rpx;
  height: 561rpx;
  top: 50%;
  left: 50%;
  margin-left: -212rpx;
  margin-top: -280rpx;
}
.routeBg .routeBgDiv .routeBgDivIntro .closeImgDiv{
  width: 31rpx;
  height: 31rpx;
  position: absolute;
  top: -15rpx;
  right: -25rpx;
  z-index: 13;
}
.routeBg .routeBgDiv .routeBgDivIntro .closeImgDiv img{
  width: 100%;
  height: 100%;
}
.routeBg .routeBgDiv .routeBgDivIntro .routeBgDivImg{
  width: 424rpx;
  height: 561rpx;
}
.routeBg .routeBgDiv .routeBgDivIntro .routeBgDivImg img{
  width: 100%;
  height: 100%;
}
.routeBg .routeBgDiv .routeBgDivIntro .routeBgDivTxt{
  position: absolute;
  top: 0;
  width: 100%;
}
.routeBg .routeBgDiv .routeBgDivIntro .routeBgDivTxt h3{
  text-align: center;
  font-size: 30rpx;
  color: #c17713;
  height: 95rpx;
  line-height: 95rpx;
}
.routeBg .routeBgDiv .routeBgDivIntro .routeBgDivTxt p{
  font-size: 24rpx;
  line-height: 32rpx;
  color: #bd8f51;
  padding: 0 13rpx 0 13rpx;
}
</style>
